import React from 'react';
import { ButtonType, ButtonShape, ButtonSize } from './type';
import './button.scss';

export interface ButtonProps {
	type?: `${ButtonType}` | undefined;
	shape?: `${ButtonShape}` | undefined;
	size?: `${ButtonSize}` | undefined;
	className?: string;
	children?: React.ReactNode | string;
	prefix?: React.ReactNode;
	suffix?: React.ReactNode;
	onClick?: React.MouseEventHandler<HTMLDivElement>;
}

const HSUIButton = (props: ButtonProps) => {
	const {
		type = 'primary',
		shape = 'normal',
		size = 'primary',
		className,
		children,
		prefix,
		suffix,
		onClick,
	} = props;
	return (
		<div
			className={`hs-ui-button hs-ui-button-${type} hs-ui-button-shape-${shape} hs-ui-button-size-${size} ${className}`}
			onClick={onClick}>
			<div className="hs-ui-button__prefix">{prefix}</div>
			<div className="hs-ui-button__wrapper">
				<button className=" hs-ui-button__button">{children}</button>
			</div>
			<div className="hs-ui-button__suffix">{suffix}</div>
		</div>
	);
};

export default HSUIButton;
